<template>
  <div class="app">
    <h2>我是app组件</h2>
    <h2>当前count的值{{ count }}</h2>
    <button @click="add">+1</button>
    <button @click="sub">-1</button>
  </div>
</template>

<script>
import useCount from "@/hooks/useCount";
export default {
  name: 'App',
/*
setup函数：钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：
  1.需要在非单文件组件中使用组合式 API 时。
  2.需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
  3.我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性

setup既然是一个函数那么它可以有返回值它的返回值用来：
  setup函数的返回值可以在模板template中被使用
  也就是说我们可以通过setup函数的返回值来替代data选项，甚至可以返回一个执行函数来代替methods中定义的方法
*/

/*
ref()：接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性
   详细信息：
      ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用
      如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。
      若要避免这种深层次的转换，请使用 shallowRef() 来替代。
*/
  setup(props, context) {
    return {...useCount()}
  }
}
</script>

<style lang="less"></style>
